<template>
  <div class="frontend-home">
    <!-- Hero区域 -->
    <hero-section @view-product="handleViewProduct" />

    <div class="main-content">
      <!-- 分类导航 -->
      <category-nav
        :categories="categories"
        :selected-category="selectedCategory"
        @select="handleCategorySelect"
      />

      <!-- 产品展示 -->
      <div class="content-section">
        <div class="header-actions">
          <h2>{{ t("products.title") }}</h2>
        </div>

        <el-skeleton :loading="loading" animated :count="6">
          <template #template>
            <div class="grid-container">
              <div v-for="n in 6" :key="n" class="skeleton-card">
                <el-skeleton-item variant="image" style="height: 200px" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 50%" />
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      margin-top: 16px;
                    "
                  >
                    <el-skeleton-item variant="text" style="width: 30%" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template #default>
            <div class="product-grid">
              <div
                v-for="product in filteredProducts"
                :key="product.id"
                class="product-card"
                @click="handleViewProduct(product)"
              >
                <div class="image-container">
                  <img
                    v-for="(image, index) in (product.images ?? '').split(',')"
                    :key="index"
                    :src="image"
                    :alt="product.name"
                    class="product-image"
                  />
                </div>
                <div class="product-info">
                  <h3 class="product-title">{{ product.name }}</h3>
                  <p class="product-description">{{ product.description }}</p>
                  <p class="product-power">功率: {{ product.power }}W</p>
                  <p class="product-temperature">
                    色温: {{ product.temperature }}K
                  </p>
                  <div class="product-meta">
                    <span class="price">¥{{ product.price }}</span>
                    <el-button type="primary">{{
                      t("products.viewDetails")
                    }}</el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/store/user";
import HeroSection from "@/components/home/HeroSection.vue";
import CategoryNav from "@/components/home/CategoryNav.vue";
import { getProducts } from "@/api/product";
import { getCategories } from "@/api/category";
import type { Product, Category } from "@/types";

const { t } = useI18n();
const router = useRouter();
const userStore = useUserStore();
const loading = ref(false);
const selectedCategory = ref<number | undefined>(undefined);
const products = ref<Product[]>([]);
const categories = ref<Category[]>([]);

const fetchProducts = async () => {
  loading.value = true;
  try {
    products.value = await getProducts();
  } catch (error) {
    console.error("获取产品失败:", error);
  } finally {
    loading.value = false;
  }
};

const fetchCategories = async () => {
  loading.value = true;
  try {
    categories.value = await getCategories();
  } catch (error) {
    console.error("获取分类失败:", error);
  } finally {
    loading.value = false;
  }
};

const filteredProducts = computed(() => {
  if (!selectedCategory.value) return products.value;
  return products.value.filter((p) => p.categoryId === selectedCategory.value);
});

const handleCategorySelect = (categoryId: number | undefined) => {
  selectedCategory.value = categoryId;
};

const handleViewProduct = (product: Product) => {
  router.push(`/products/${product.id}`);
};

onMounted(() => {
  fetchProducts();
  fetchCategories();
});
</script>

<style scoped lang="scss">
.frontend-home {
  min-height: 100vh;
  background: var(--bg-color);

  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;

    .content-section {
      .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        h2 {
          font-size: 2rem;
          font-weight: 600;
          color: var(--text-color);
          margin: 0;
        }
      }

      .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;

        .product-card {
          background: var(--bg-color);
          border-radius: 16px;
          overflow: hidden;
          box-shadow: var(--box-shadow);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          cursor: pointer;
          border: 1px solid var(--border-color);

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
          }

          .image-container {
            height: 200px;
            overflow: hidden;
            border-bottom: 1px solid var(--border-color);
          }

          .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            
            &:hover {
              transform: scale(1.05);
            }
          }

          .product-info {
            padding: 16px;

            .product-title {
              font-size: 1.5rem;
              font-weight: bold;
              color: var(--text-color);
              margin-bottom: 8px;
            }

            .product-description {
              font-size: 1rem;
              color: var(--text-color-secondary);
              margin: 8px 0;
              line-height: 1.5;
            }

            .product-power, .product-temperature {
              font-size: 0.875rem;
              color: var(--text-color-secondary);
              margin: 8px 0;
              display: inline-block;
              padding: 4px 8px;
              background: var(--bg-color-secondary);
              border-radius: 4px;
              margin-right: 8px;
            }

            .product-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 16px;

              .price {
                font-size: 1.25rem;
                color: var(--primary-color);
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 992px) {
    .main-content {
      grid-template-columns: 1fr;
      padding: 20px;
    }
  }

  @media (max-width: 576px) {
    .main-content {
      .product-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
